<!--考核列表开始-->
<template>
  <div class="checkListContainer">
    <van-sticky>
      <!--头部bar开始-->
      <p class="titlebar">
        <span @click="goback">
          <van-icon name="arrow-left" size="18" />
        </span>
        <span
          class="nav_item"
          v-for="(item, index) in navList"
          :key="index"
          :class="{ current: tabCurrentIndex === index }"
          @click="tabClick(index,item.state)"
        >{{item.text}}</span>
        <span>
          <van-icon name="wap-home" size="18" @click="toHome" />
        </span>
      </p>
      <!--头部bar结束-->
    </van-sticky>
    <!--列表开始-->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
      <van-list
        v-if="List.length>0"
        v-model="loading"
        :finished="finished"
        offset="10"
        finished-text="没有更多了..."
        @load="onLoad"
      >
        <div class="ListContent" v-for="(item, index) in List" :key="index">
       
          <div class="content1" @click="toDetail(item.id,item.statu)">
            <div class="content">
              <p class="contentleft">{{item.group_department_name}}/{{item.project_company_name}}</p>
              <p class="contentright">{{item.update_date}}</p>
            </div>
            <div class="historycont" v-if="statu==1">
              <p class="historycontp">
                <span class="left">考核次数:1次</span>
                <span class="right">分数:{{item.score}}</span>
              </p>
            </div>
          </div>
        </div>
      </van-list>
      <div class="noData" v-else>
        <van-image width="163px" height="120px" fit="contain" :src="nochekData" />
        <p>暂无数据 ！</p>
      </div>
    </van-pull-refresh>
    <!--列表结束-->
    <!--新建按钮-->
    <div class="cleanerCheckBut" v-if="statu==0 && user_role_id==9">
      <router-link to="/projectCompanyCheck">
        <button class="newbut">新建</button>
      </router-link>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      token: state => state.Authorization,
      user_department_type: state => state.userData.department_type, //人员类型
      user_department_id: state => state.userData.department_id, // 人员id
      user_group_department_id: state => state.userData.group_department_id,
      user_project_company_id: state => state.userData.project_company_id,
      user_project_id: state => state.userData.project_id,
      user_role_id: state => state.userData.role_id
    })
  },
  data() {
    return {
      nochekData: require("../../../../static/image/nochekData.png"),
      //上拉加载
      loading: false,
      finished: false,
      pageSize: 20,
      pageNumber: 1,
      tabCurrentIndex: 0,
      navList: [
        {
          state: 0,
          text: "当前考核"
        },
        {
          state: 1,
          text: "历史考核"
        }
      ],
      //参数赋值
      group_department_id: "",
      project_company_id: "",
      project_id: "",
      district_id1: "",
      template_id: "",
      statu: 0,
      List: [],
      refreshing: false
    };
  },
  destroyed() {
    var that = this;
    document.removeEventListener("backbutton", that.backbutton, false);
  },
  mounted() {
    if (localStorage.getItem("check-projectcompany-tab")) {
      var current = localStorage.getItem("check-projectcompany-tab");
      this.tabCurrentIndex = parseInt(current);
      this.statu = parseInt(current);
      this.List = [];
      this.getLoadData();
    } else {
      this.getLoadData();
    }
    var that = this;
    document.addEventListener("backbutton", that.backbutton, false);
  },

  methods: {
    goback() {
      if (this.$route.path == "/projectCompanyList") {
        this.$router.push({
          path: "/checkIndex"
        });
      }
    },
    backbutton() {
      if (this.$route.path == "/projectCompanyList") {
        this.$router.push({
          path: "/checkIndex"
        });
      }
    },
    onRefresh() {
      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.List = [];
      this.getLoadData();
    },
    //上拉加载
    onLoad() {
      this.loading = true;
      this.pageNumber++;
      this.getLoadData();
    },
    toHome() {
      this.$router.push({
        //核心语句
        path: "/home" //跳转的路径
      });
    },
    tabClick(index, state) {
      this.tabCurrentIndex = index;
      localStorage.setItem("check-projectcompany-tab", this.tabCurrentIndex);
      console.log(this.tabCurrentIndex, state);
      this.statu = state;
      this.pageNumber = 1;
      this.loading = false;
      this.finished = false;
      this.List = [];
      this.getLoadData();
    },
    //拿到数据
    getLoadData() {
      this.$toast.loading({
        mask: true,
        message: "加载中...",
        duration: 5000
      });
      var params = {
        token: this.token,
        statu: this.statu,
        group_department_id: 1,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.ProjectCompany.GetCleanCheckProcess&api=86`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            this.refreshing = false;
            this.List = this.List.concat(res.data.list);
            console.log("项目公司考核记录1", this.List);
            //判断是否停止下来加载
            if (
              res.data.list.length < this.pageSize ||
              res.data.list.length == 0
            ) {
              this.finished = true;
            }
            this.loading = false;
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    //项目公司考核详情
    toDetail(id, statu) {
      this.$router.push({
        //核心语句
        path: "/projectCompanyCheckUpdate", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          id,
          statu
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../assets/css/check";
.van-pull-refresh {
  height: 100%;
}
</style>